<template>
    <div>
        <el-table :data="store.getters['admin/getUserList']" boder  style="width: 100%">
            <el-table-column prop="uid" label="用户编号" width="180" />
            <el-table-column prop="username" label="用户名称" width="180" />
            <el-table-column prop="roleid" label="所属角色" width="180" />
            <el-table-column prop="status" label="状态" width="80" >
              <template v-slot="item">
                <div>
                  <el-tag v-if="item.row.status == 1" type="success">启用</el-tag>
                  <el-tag v-else type="danger">禁用</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="180">
              <template v-slot="item">
                <div>
                  <el-button @click="edit(item.row.uid)" type="primary" size="small" plain>编辑</el-button>
                  <el-button @click="del(item.row.id)" type="danger" size="small" plain>删除</el-button>
                </div>
              </template>
            </el-table-column>
        </el-table>
        <el-pagination @current-change="changepage" background layout="prev, pager, next" :page-size="store.getters['admin/getSize']" :total="store.getters['admin/getCount']" small="true"/>
    </div>
</template>

<script setup lang="ts">
import { useStore } from 'vuex';
import { defineEmits } from 'vue';
import { userdelete } from '@/request/api';
import { ElMessageBox,ElMessage } from 'element-plus';
let store = useStore();
store.dispatch('admin/getUserListAction');
let emit = defineEmits(['edit']);
let edit = (id:number)=>{
  emit('edit',id)
};
let changepage = (n:number)=>{
  store.dispatch('admin/changPageAction',n);
}
let del=(id:number):void=>{
  ElMessageBox.confirm(
    '你确定要删除这条数据吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    userdelete({ id }).then((res:any)=>{
      if (res.data.code == 200) {
        ElMessage.success(res.data.msg)
        store.dispatch('admin/getUserListAction');
        store.dispatch('admin/getCountAction');
      } else {
        ElMessage.error(res.data.msg)
      }
    })
  }).catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
  })
}
</script>

<style scoped>
.el-button{
    margin: 10px 5px;
}
</style>